<div>
  <button id="btn-add-course" class="btn btn-success" (click)="isAddNewCourseFormExpanded = true"
    [disabled]="isAddNewCourseFormExpanded || isLoadingActiveCourses"><i class="fas fa-plus"></i> Add New Course
  </button>
</div>

<div id="add-course-section" class="course-section" *ngIf="isAddNewCourseFormExpanded && !isLoadingActiveCourses" @collapseAnim>
  <tm-course-edit-form [formMode]="CourseEditFormMode.ADD" [(formModel)]="courseFormModel"
    [resetFormEvent]="resetCourseForm" (closeFormEvent)="isAddNewCourseFormExpanded = false"
    (createNewCourseEvent)="createNewCourse()" (copyCourseEvent)="createCopiedCourse($event)">
  </tm-course-edit-form>
</div>

<div *ngIf="isCopyingCourse" class="margin-top-30px">
  <p>Copy Progress</p>
  <tm-progress-bar></tm-progress-bar>
</div>

<tm-loading-retry [shouldShowRetry]="hasLoadingFailed" [message]="'Failed to load courses'"
  (retryEvent)="loadInstructorCourses()">
  <div class="course-section">
    <h2 class="h3">Active courses</h2>
    <div *tmIsLoading="isLoadingActiveCourses">
      <ng-template #addCourseAlert>
        <div class="alert alert-warning margin-top-30px" role="alert">
          You do not seem to have any active courses. Use the button above to create a new course.
        </div>
      </ng-template>
      <div *ngIf="activeCourses.length; else addCourseAlert;">
        <div class="table table-responsive">
          <table id="active-courses-table" class="table table-striped table-bordered margin-0">
            <thead>
              <tr class="bg-primary text-white">
                <th id="sort-course-id" class="sortable-header" (click)="sortCoursesEvent(SortBy.COURSE_ID)"
                  [attr.aria-sort]="getAriaSortActive(SortBy.COURSE_ID)">
                  <button>
                    Course ID
                    <span class="fa-stack" aria-hidden="true">
                      <i class="fas fa-sort"></i>
                      <i class="fas fa-sort-down"
                        *ngIf="activeTableSortBy === SortBy.COURSE_ID && activeTableSortOrder === SortOrder.DESC"></i>
                      <i class="fas fa-sort-up"
                        *ngIf="activeTableSortBy === SortBy.COURSE_ID && activeTableSortOrder === SortOrder.ASC"></i>
                    </span>
                  </button>
                </th>
                <th id="sort-course-name" class="sortable-header" (click)="sortCoursesEvent(SortBy.COURSE_NAME)"
                  [attr.aria-sort]="getAriaSortActive(SortBy.COURSE_NAME)">
                  <button>
                    Course Name
                    <span class="fa-stack" aria-hidden="true">
                      <i class="fas fa-sort"></i>
                      <i class="fas fa-sort-down"
                        *ngIf="activeTableSortBy === SortBy.COURSE_NAME && activeTableSortOrder === SortOrder.DESC"></i>
                      <i class="fas fa-sort-up"
                        *ngIf="activeTableSortBy === SortBy.COURSE_NAME && activeTableSortOrder === SortOrder.ASC"></i>
                    </span>
                  </button>
                </th>
                <th id="sort-creation-date" class="sortable-header"
                  (click)="sortCoursesEvent(SortBy.COURSE_CREATION_DATE)"
                  [attr.aria-sort]="getAriaSortActive(SortBy.COURSE_CREATION_DATE)">
                  <button>
                    Creation Date
                    <span class="fa-stack" aria-hidden="true">
                      <i class="fas fa-sort"></i>
                      <i class="fas fa-sort-down"
                        *ngIf="activeTableSortBy === SortBy.COURSE_CREATION_DATE && activeTableSortOrder === SortOrder.DESC"></i>
                      <i class="fas fa-sort-up"
                        *ngIf="activeTableSortBy === SortBy.COURSE_CREATION_DATE && activeTableSortOrder === SortOrder.ASC"></i>
                    </span>
                  </button>
                </th>
                <th>Sections</th>
                <th>Teams</th>
                <th>Total Students</th>
                <th>Total Unregistered</th>
                <th class="text-center">Action(s)</th>
              </tr>
            </thead>
            <tbody>
              <ng-template #loadingSpinner>
                <tm-ajax-loading [useBlueSpinner]="true"></tm-ajax-loading>
              </ng-template>
              <tr *ngFor="let course of activeCourses; let i = index">
                <td id="course-id-{{ i }}" class="text-break">{{course.course.courseId}}</td>
                <td class="text-break">{{course.course.courseName}}</td>
                <td>
                  <span class="ngb-tooltip-class" container="body"
                    [ngbTooltip]="course.course.creationTimestamp | date:'EEE, dd MMM yyyy, h:mma'">
                    {{course.course.creationTimestamp | date:'d MMM yyyy'}}
                  </span>
                </td>
                <td>
                  <span *ngIf="!courseStats[course.course.courseId]">
                    <button *ngIf="!course.isLoadingCourseStats; else loadingSpinner"
                      (click)="getCourseStats(i)" class="link-button" > Show
                    </button>
                  </span>
                  <span *ngIf="courseStats[course.course.courseId]">
                    {{ courseStats[course.course.courseId]['sections'] }}
                  </span>
                </td>
                <td>
                  <span *ngIf="!courseStats[course.course.courseId]">
                    <button *ngIf="!course.isLoadingCourseStats; else loadingSpinner" id="show-statistics-{{ i }}"
                      (click)="getCourseStats(i)" class="link-button" > Show
                    </button>
                  </span>
                  <span *ngIf="courseStats[course.course.courseId]">
                    {{ courseStats[course.course.courseId]['teams'] }}
                  </span>
                </td>
                <td>
                  <span *ngIf="!courseStats[course.course.courseId]">
                    <button *ngIf="!course.isLoadingCourseStats; else loadingSpinner"
                      (click)="getCourseStats(i)" class="link-button" > Show
                    </button>
                  </span>
                  <span *ngIf="courseStats[course.course.courseId]">
                    {{ courseStats[course.course.courseId]['students'] }}
                  </span>
                </td>
                <td>
                  <span *ngIf="!courseStats[course.course.courseId]">
                    <button *ngIf="!course.isLoadingCourseStats; else loadingSpinner"
                      (click)="getCourseStats(i)" class="link-button" > Show
                    </button>
                  </span>
                  <span *ngIf="courseStats[course.course.courseId]">
                    {{ courseStats[course.course.courseId]['unregistered'] }}
                  </span>
                </td>
                <td class="text-center actions-cell">
                  <a id="btn-enroll-{{ i }}" class="btn btn-light btn-sm custom-button-active" *ngIf="course.canModifyStudent"
                    ngbTooltip="Enroll student into the course" tmRouterLink="/web/instructor/courses/enroll"
                    [queryParams]="{courseid: course.course.courseId}">
                    Enroll
                  </a>
                  <button id="btn-enroll-disabled-{{ i }}" class="btn btn-light btn-sm disabled"
                    *ngIf="!course.canModifyStudent">
                    Enroll
                  </button>
                  <div ngbDropdown class="d-inline-block">
                    <button id="btn-other-actions-{{ i }}" class="btn btn-light btn-sm custom-button-active" ngbDropdownToggle>Other
                      Actions</button>
                    <div ngbDropdownMenu>
                      <a class="btn btn-primary btn-sm dropdown-item clickable"
                        tmRouterLink="/web/instructor/courses/details" [queryParams]="{courseid: course.course.courseId}">
                        View
                      </a>
                      <a class="btn btn-primary btn-sm dropdown-item clickable"
                        tmRouterLink="/web/instructor/courses/edit" [queryParams]="{courseid: course.course.courseId}">
                        Edit
                      </a>
                      <button id="btn-copy-{{ i }}" class="btn btn-primary btn-sm dropdown-item clickable"
                        *ngIf="course.canModifyCourse"
                        (click)="onCopy(course.course.courseId, course.course.courseName, course.course.timeZone)"
                        ngbTooltip="Copy the course and its corresponding sessions" placement="left" container="body"
                        [disabled]="isCopyingCourse">
                        Copy
                      </button>
                      <button id="btn-archive-{{ i }}" class="btn btn-primary btn-sm dropdown-item clickable"
                        (click)="changeArchiveStatus(course.course.courseId, true)"
                        ngbTooltip="Archive the course so that it will not be shown in the home page any more (you can still access it from the 'Courses' tab)"
                        placement="left" container="body">
                        Archive
                      </button>
                      <a class="btn btn-primary btn-sm dropdown-item clickable" *ngIf="course.course.privileges?.canModifyInstructor && course.course.isMigrated"
                      tmRouterLink='/web/instructor/courses/student-activity-logs' [queryParams]="{courseid: course.course.courseId}">
                      View Logs
                      </a>
                      <button id="btn-soft-delete-{{ i }}" class="btn btn-primary btn-sm dropdown-item clickable"
                        *ngIf="course.canModifyCourse" (click)="onDelete(course.course.courseId)"
                        ngbTooltip="Delete the course and its corresponding students and sessions" placement="left"
                        container="body">
                        Delete
                      </button>
                      <button id="btn-soft-delete-disabled-{{ i }}" class="btn btn-primary btn-sm dropdown-item disabled"
                        *ngIf="!course.canModifyCourse">
                        Delete
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
            <tr *ngIf="!activeCourses.length">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </table>
          <p *ngIf="!activeCourses.length">No records found.</p>
        </div>
      </div>
    </div>
  </div>
</tm-loading-retry>

<div class="course-section">
  <h2 class="h3 text-muted">
    <span class="fa fa-file-archive" aria-hidden="true"></span> Archived courses
  </h2>
  <div *tmIsLoading="isLoadingArchivedCourses">
    <ng-template #noArchiveAlert>
      <div class="alert alert-warning margin-top-30px" role="alert">
        There are no courses archived currently.
      </div>
    </ng-template>
    <div class="card top-padded" *ngIf="archivedCourses.length else noArchiveAlert">
      <div id="archived-table-heading" class="card-header bg-info cursor-pointer"
        (click)="isArchivedCourseExpanded = !isArchivedCourseExpanded">
        <b>Archive</b>
        <div class="card-header-btn-toolbar">
          <tm-panel-chevron [isExpanded]="isArchivedCourseExpanded"></tm-panel-chevron>
        </div>
      </div>
      <div class="card-body archive-body table-responsive" *ngIf="isArchivedCourseExpanded" @collapseAnim>
        <table id="archived-courses-table" class="table table-striped table-bordered archive-table">
          <thead>
            <tr class="background-color-medium-gray text-color-gray">
              <th class="sortable-header" (click)="sortArchivedCoursesEvent(SortBy.COURSE_ID)"
                [attr.aria-sort]="getAriaSortArchived(SortBy.COURSE_ID)">
                <button>
                  Course ID
                  <span class="fa-stack" aria-hidden="true">
                    <i class="fas fa-sort"></i>
                    <i class="fas fa-sort-down"
                      *ngIf="archivedTableSortBy === SortBy.COURSE_ID && archivedTableSortOrder === SortOrder.DESC"></i>
                    <i class="fas fa-sort-up"
                      *ngIf="archivedTableSortBy === SortBy.COURSE_ID && archivedTableSortOrder === SortOrder.ASC"></i>
                  </span>
                </button>
              </th>
              <th class="sortable-header" (click)="sortArchivedCoursesEvent(SortBy.COURSE_NAME)"
                [attr.aria-sort]="getAriaSortArchived(SortBy.COURSE_NAME)">
                <button>
                  Course Name
                  <span class="fa-stack" aria-hidden="true">
                    <i class="fas fa-sort"></i>
                    <i class="fas fa-sort-down"
                      *ngIf="archivedTableSortBy === SortBy.COURSE_NAME && archivedTableSortOrder === SortOrder.DESC"></i>
                    <i class="fas fa-sort-up"
                      *ngIf="archivedTableSortBy === SortBy.COURSE_NAME && archivedTableSortOrder === SortOrder.ASC"></i>
                  </span>
                </button>
              </th>
              <th class="sortable-header" (click)="sortArchivedCoursesEvent(SortBy.COURSE_CREATION_DATE)"
                [attr.aria-sort]="getAriaSortArchived(SortBy.COURSE_CREATION_DATE)">
                <button>
                  Creation Date
                  <span class="fa-stack" aria-hidden="true">
                    <i class="fas fa-sort"></i>
                    <i class="fas fa-sort-down"
                      *ngIf="archivedTableSortBy === SortBy.COURSE_CREATION_DATE && archivedTableSortOrder === SortOrder.DESC"></i>
                    <i class="fas fa-sort-up"
                      *ngIf="archivedTableSortBy === SortBy.COURSE_CREATION_DATE && archivedTableSortOrder === SortOrder.ASC"></i>
                  </span>
                </button>
              </th>
              <th class="text-center">Action(s)</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let course of archivedCourses; let i = index">
              <td id="archived-course-id-{{ i }}" class="text-break">{{course.course.courseId}}</td>
              <td class="text-break">{{course.course.courseName}}</td>
              <td>
                <span container="body" class="ngb-tooltip-class"
                  ngbTooltip="{{course.course.creationTimestamp | date:'EEE, dd MMM yyyy, h:mma'}}">{{course.course.creationTimestamp
                  | date:'d MMM yyyy'}}</span>
              </td>
              <td class="text-center actions-cell">
                <button id="btn-unarchive-{{ i }}" class="btn btn-light btn-sm custom-button-archived"
                  (click)="changeArchiveStatus(course.course.courseId, false)">
                  Unarchive
                </button>
                <button id="btn-soft-delete-archived-{{ i }}" class="btn btn-light btn-sm custom-button-archived" *ngIf="course.canModifyCourse"
                  (click)="onDelete(course.course.courseId)"
                  ngbTooltip="Delete the course and its corresponding students and sessions">
                  Delete
                </button>
                <button id="btn-soft-delete-archived-disabled-{{ i }}" class="btn btn-light btn-sm disabled"
                  *ngIf="!course.canModifyCourse">
                  Delete
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div class="row course-section margin-top-30px">
  <div class="col-12">
    <h2 class="h3 text-muted">
      <span class="fa fa-trash-alt" aria-hidden="true"></span> Deleted courses
    </h2>
    <div *tmIsLoading="isLoadingSoftDeletedCourses">
      <ng-template #emptyBinAlert>
        <div class="alert alert-warning margin-top-30px" role="alert">
          There are no courses in the bin.
        </div>
      </ng-template>
      <div class="card bg-light top-padded" *ngIf="softDeletedCourses.length else emptyBinAlert">
        <div id="deleted-table-heading" class="card-header bg-secondary text-white cursor-pointer"
          (click)="isRecycleBinExpanded = !isRecycleBinExpanded">
          <b>Recycle Bin</b>
          <div class="card-header-btn-toolbar">
            <button id="btn-restore-all" class="btn btn-secondary btn-sm" *ngIf="canRestoreAll"
              (click)="$event.stopPropagation(); onRestoreAll()"
              ngbTooltip="Restore all deleted courses and their corresponding students and sessions">
              <i class="fas fa-check" aria-hidden="true"></i> Restore All
            </button>
            <button class="btn btn-secondary btn-sm disabled" *ngIf="!canRestoreAll">
              <i class="fas fa-check" aria-hidden="true"></i> Restore All
            </button>
            <button id="btn-delete-all" class="btn btn-secondary btn-sm" *ngIf="canDeleteAll"
              (click)="$event.stopPropagation(); onDeleteAll()"
              ngbTooltip="Permanently delete all courses and their corresponding students and sessions">
              <i class="fas fa-times" aria-hidden="true"></i> Delete All
            </button>
            <button class="btn btn-secondary btn-sm disabled" *ngIf="!canDeleteAll">
              <i class="fas fa-times" aria-hidden="true"></i> Delete All
            </button>
            <tm-panel-chevron [isExpanded]="isRecycleBinExpanded"></tm-panel-chevron>
          </div>
        </div>
        <div class="card-body recycle-bin-body table-responsive" *ngIf="isRecycleBinExpanded" @collapseAnim>
          <table id="deleted-courses-table"
            class="table table-responsive-lg table-striped table-bordered recycle-bin-table">
            <thead>
              <tr class="background-color-medium-gray text-color-gray">
                <th class="sortable-header" (click)="sortDeletedCoursesEvent(SortBy.COURSE_ID)"
                  [attr.aria-sort]="getAriaSortDeleted(SortBy.COURSE_ID)">
                  <button>
                    Course ID
                    <span class="fa-stack" aria-hidden="true">
                      <i class="fas fa-sort"></i>
                      <i class="fas fa-sort-down"
                        *ngIf="deletedTableSortBy === SortBy.COURSE_ID && deletedTableSortOrder === SortOrder.DESC"></i>
                      <i class="fas fa-sort-up"
                        *ngIf="deletedTableSortBy === SortBy.COURSE_ID && deletedTableSortOrder === SortOrder.ASC"></i>
                    </span>
                  </button>
                </th>
                <th class="sortable-header" (click)="sortDeletedCoursesEvent(SortBy.COURSE_NAME)"
                  [attr.aria-sort]="getAriaSortDeleted(SortBy.COURSE_NAME)">
                  <button>
                    Course Name
                    <span class="fa-stack" aria-hidden="true">
                      <i class="fas fa-sort"></i>
                      <i class="fas fa-sort-down"
                        *ngIf="deletedTableSortBy === SortBy.COURSE_NAME && deletedTableSortOrder === SortOrder.DESC"></i>
                      <i class="fas fa-sort-up"
                        *ngIf="deletedTableSortBy === SortBy.COURSE_NAME && deletedTableSortOrder === SortOrder.ASC"></i>
                    </span>
                  </button>
                </th>
                <th class="sortable-header" (click)="sortDeletedCoursesEvent(SortBy.COURSE_CREATION_DATE)"
                  [attr.aria-sort]="getAriaSortDeleted(SortBy.COURSE_CREATION_DATE)">
                  <button>
                    Creation Date
                    <span class="fa-stack" aria-hidden="true">
                      <i class="fas fa-sort"></i>
                      <i class="fas fa-sort-down"
                        *ngIf="deletedTableSortBy === SortBy.COURSE_CREATION_DATE && deletedTableSortOrder === SortOrder.DESC"></i>
                      <i class="fas fa-sort-up"
                        *ngIf="deletedTableSortBy === SortBy.COURSE_CREATION_DATE && deletedTableSortOrder === SortOrder.ASC"></i>
                    </span>
                  </button>
                </th>
                <th class="sortable-header" (click)="sortDeletedCoursesEvent(SortBy.COURSE_DELETION_DATE)"
                  [attr.aria-sort]="getAriaSortDeleted(SortBy.COURSE_DELETION_DATE)">
                  <button>
                    Deletion Date
                    <span class="fa-stack" aria-hidden="true">
                      <i class="fas fa-sort"></i>
                      <i class="fas fa-sort-down"
                        *ngIf="deletedTableSortBy === SortBy.COURSE_DELETION_DATE && deletedTableSortOrder === SortOrder.DESC"></i>
                      <i class="fas fa-sort-up"
                        *ngIf="deletedTableSortBy === SortBy.COURSE_DELETION_DATE && deletedTableSortOrder === SortOrder.ASC"></i>
                    </span>
                  </button>
                </th>
                <th class="text-center">Action(s)</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let course of softDeletedCourses; let i = index">
                <td id="deleted-course-id-{{ i }}" class="text-break">{{course.course.courseId}}</td>
                <td class="text-break">{{course.course.courseName}}</td>
                <td>
                  <span container="body" class="ngb-tooltip-class"
                    [ngbTooltip]="course.course.creationTimestamp | date:'EEE, dd MMM yyyy, h:mma'">
                    {{course.course.creationTimestamp | date:'d MMM yyyy'}}
                  </span>
                </td>
                <td>
                  <span container="body" class="ngb-tooltip-class"
                    [ngbTooltip]="course.course.deletionTimestamp | date:'EEE, dd MMM yyyy, h:mma'">
                    {{course.course.deletionTimestamp | date:'d MMM yyyy'}}
                  </span>
                </td>
                <td class="text-center actions-cell">
                  <button id="btn-restore-{{ i }}" class="btn btn-light btn-sm" *ngIf="course.canModifyCourse"
                    (click)="onRestore(course.course.courseId)"
                    ngbTooltip="Restore the deleted course and its corresponding students and sessions">
                    Restore
                  </button>
                  <button id="btn-restore-disabled-{{ i }}" class="btn btn-light btn-sm disabled"
                    *ngIf="!course.canModifyCourse">
                    Restore
                  </button>
                  <button id="btn-delete-{{ i }}" class="btn btn-light btn-sm text-danger" *ngIf="course.canModifyCourse"
                    (click)="onDeletePermanently(course.course.courseId)"
                    ngbTooltip="Permanently delete the course and its corresponding students and sessions">
                    Delete Permanently
                  </button>
                  <button id="btn-delete-disabled-{{ i }}" class="btn btn-light btn-sm disabled text-danger"
                    *ngIf="!course.canModifyCourse">
                    Delete Permanently
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<ng-template #modifiedTimestampsModal>
  <tm-modified-timestamps-modal [modifiedSessions]="this.modifiedSessions">
  </tm-modified-timestamps-modal>
</ng-template>
